<!--
 * @FileDescription 原理
 * @Author lz
 * @Date 20230228 15:05:33
 * @LastEditors lz
 * @LastEditTime 20230228 15:05:33
-->
<template>
    <div class="principle_wp">
        <div class="ask_box ask">
            <div class="tit">
                主考官
            </div>
            <div class="content">
                {{ props.Questions }}
            </div>
        </div>
        <div class="ask_box answer_1">
            <div class="tit">
                技师A
            </div>
            <div class="content">
                {{ props.Dialogues[0] }}
            </div>
        </div>
        <div class="ask_box answer_2">
            <div class="tit">
                技师B
            </div>
            <div class="content">
                {{ props.Dialogues[1] }}
            </div>
        </div>
        <div class="option_bg">
            <div class="Start" @click="SelectBtn('A')" :class="state.RightAndWrong == 'A' ? 'ChickOut' : ''">
                技师A说得对
            </div>
            <div class="Start" @click="SelectBtn('B')" :class="state.RightAndWrong == 'B' ? 'ChickOut' : ''">
                技师B说得对
            </div>
            <div class="Start" @click="SelectBtn('C')" :class="state.RightAndWrong == 'C' ? 'ChickOut' : ''">
                技师A和B说的都对
            </div>
            <div class="Start" @click="SelectBtn('D')" :class="state.RightAndWrong == 'D' ? 'ChickOut' : ''">
                技师A和B说的都错
            </div>
        </div>

        <div class="submit Btn" @click="submit()">
            提交
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import simulationData from '../simulationTraining';
import HomeContent from '../../HomeContent';
import Speak from '@components/TTS/Speak.vue';
interface Props {
    Answer: any;
    Questions: any;
    Dialogues: any;
}
const props = defineProps<Props>();
const emit = defineEmits(["doSth"]);
const state = reactive({
    Selected: '',
    RightAndWrong: '',
});

function SelectBtn(val: string) {
    state.Selected = val
    state.RightAndWrong = val
}
// 触发提交
function submit() {
    conArr()
    if (state.Selected == props.Answer) {
        emit('doSth', true);
    } else {
        emit('doSth', false);
    }
}
// 存贮题目信息
let conArrlist: Array<any> = []
function conArr() {
    conArrlist = []
    conArrlist.push({ types: state.RightAndWrong })
    simulationData.Default.historyList.set(simulationData.Default.subscript.value, conArrlist)
}

//监听题目切换
watch(() => simulationData.Default.subscript.value, (newVal, oldVal) => {
    state.RightAndWrong = '';

    if (newVal != oldVal) {
        if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
            Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
            state.RightAndWrong = Echo[0].types
        }
    }
})

let Echo: any = []
onMounted(() => {

    state.RightAndWrong = '';


    if (simulationData.Default.trainingDatalist.value[simulationData.Default.subscript.value].IsSubmit) {
        Echo = simulationData.Default.historyList.get(simulationData.Default.subscript.value)
        state.RightAndWrong = Echo[0].types
    }
    console.log(HomeContent.Default.pausableType.value.pausable);

    setTimeout(() => {
        //语音播放
        HomeContent.Default.pausableType.value.pausable = false
        console.log(HomeContent.Default.pausableType.value.pausable);
        
    }, 1500)
});
</script>

<style scoped>
.ask_box {
    position: absolute;
    right: 0;
    width: 300px;
    height: 180px;
    background-image: url('/structure/prompt_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.ask {
    top: 100px;
}

.answer_1 {
    top: 280px;
}

.answer_2 {
    top: 460px;
}

.tit {
    color: #31F8FF;
    font-size: 28px;
    padding: 10px;
    padding-left: 20px;
    padding-bottom: 0;
    font-family: PangMenZhengDao;
}

.content {
    font-size: 16px;
    padding: 20px;
    padding-top: 0;
    height: 110px;
    overflow-y: auto;
    color: #fff;
}

.content::-webkit-scrollbar {
    display: none;
}

.option_bg {
    position: absolute;
    right: 0;
    top: 640px;
    width: 300px;
    height: 380px;
    background-image: url('/structure/lab_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Start {
    margin: 10px auto;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 80px;
    width: 250px;
    height: 80px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.submit {
    left: 888px;
    bottom: 90px;
}

.Btn {
    position: absolute;
    font-size: 18px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    line-height: 54px;
    width: 120px;
    height: 54px;
    background-image: url('/structure/btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.Start:hover {
    color: #18ECFF;
}

.ChickOut {
    color: #18ECFF;
}
</style>